iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 21
1
Modern Web

和少女工程師一起學 JavaScript 系列 第 21

和少女工程師一起學 JavaScript Day21 同步&非同步

  • 分享至 

  • xImage
  •  

同步 (Synchronous)

  • 必須先弄完一項之後再去處理另一項(先完成 A 才能做 B、C、D ...),整個流程會被前一個步驟卡住
  • JS是屬於同步

非同步 (Asynchronous)

  • 處理事件的流程不會被「卡住」

  • JS雖然是屬於同步,但是當他去呼叫其它資源使用時,因為無法準確確認完成時間就會以非同步的方式執行

    範例:

    1. setTimeout:屬於 Web API JS 去呼叫瀏覽器來請求定時的功能參考,並非 JS 本身來計算時間

      function wash(){
      	console.log('洗碗');
      }
      
      function callSomeone(someone){
      	console.log('打給'+ someone);
      
      	setTimeout(function(){
      		console.log( someone + '回電')
      	},0);	
      }
      
      function doWork(){
      	var auntie = "漂亮阿姨";
      
      	callSomeone(auntie)
      	wash()
      }
      
      doWork();
      
      //打給漂亮阿姨
      //洗碗
      //漂亮阿姨回電
      

      https://s3-us-west-2.amazonaws.com/secure.notion-static.com/557bfc35-d2ac-4084-bb75-abecbc71abda/_2019-10-09_1.17.07.png

      等所有程式碼都執行完後才會執行事件佇列裡的程式碼,所以「漂亮阿姨回電」就變成最後一個被執行的程式碼

      for (var i = 0; i < 3; i++){
      	setTimeout(function(){
      		console.log(i)
      	},0);	
      }
      
      //3
      //3
      //3
      

      setTimeOut 在此執行的結果就是 i 的最終值

    2. addEventListener:另外如 addEventListener, Ajax 都是這樣的概念 (但不一定都屬於 Web API)都是 JS 呼叫外部資源來達成所以並非是函式內的函式而是調用其它資源所造成的喔

      <p>點我</p>
      
      function clickMe(){
      	console.log('click')
      }
      
      var dom = document.querySelector('p');
      dom.addEventListener('click', clickMe, false);
      

上一篇
和少女工程師一起學 JavaScript:Day20 ES6 module
下一篇
和少女工程師一起學 JavaScript Day22 Promise
系列文
和少女工程師一起學 JavaScript 27
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言